import React, { useState } from 'react';
import { Table, Button, Tag, Space, Modal, Form, Input, Select, message } from 'antd';
import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';

const { Option } = Select;

const AdminManagement = () => {
  const [admins, setAdmins] = useState([
    { id: 1, name: '超级管理员', email: 'admin@example.com', role: '超级管理员', status: '启用', permissions: ['用户管理', '角色管理', '日志管理', '系统设置'] },
    { id: 2, name: '系统管理员', email: 'sysadmin@example.com', role: '系统管理员', status: '启用', permissions: ['用户管理', '角色管理'] },
    { id: 3, name: '运营管理员', email: 'ops@example.com', role: '运营管理员', status: '禁用', permissions: ['用户管理'] },
  ]);

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingAdmin, setEditingAdmin] = useState(null);
  const [form] = Form.useForm();

  const showModal = (admin = null) => {
    setEditingAdmin(admin);
    if (admin) {
      form.setFieldsValue(admin);
    } else {
      form.resetFields();
    }
    setIsModalVisible(true);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    setEditingAdmin(null);
    form.resetFields();
  };

  const handleOk = () => {
    form.validateFields().then(values => {
      if (editingAdmin) {
        // 编辑管理员
        setAdmins(admins.map(admin => 
          admin.id === editingAdmin.id ? { ...admin, ...values } : admin
        ));
        message.success('管理员信息更新成功');
      } else {
        // 添加新管理员
        const newAdmin = {
          id: admins.length + 1,
          ...values,
          status: '启用'
        };
        setAdmins([...admins, newAdmin]);
        message.success('新管理员添加成功');
      }
      setIsModalVisible(false);
      setEditingAdmin(null);
      form.resetFields();
    });
  };

  const handleDelete = (id) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个管理员吗？',
      onOk() {
        setAdmins(admins.filter(admin => admin.id !== id));
        message.success('管理员删除成功');
      },
    });
  };

  const columns = [
    {
      title: '管理员ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '管理员名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        <Tag color={status === '启用' ? 'green' : 'red'}>
          {status}
        </Tag>
      ),
    },
    {
      title: '权限',
      dataIndex: 'permissions',
      key: 'permissions',
      render: (permissions) => (
        <div>
          {permissions.map(permission => (
            <Tag key={permission} color="blue" style={{ marginBottom: 4 }}>
              {permission}
            </Tag>
          ))}
        </div>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button 
            type="primary" 
            icon={<EditOutlined />} 
            size="small"
            onClick={() => showModal(record)}
          >
            编辑
          </Button>
          <Button 
            danger 
            icon={<DeleteOutlined />} 
            size="small"
            onClick={() => handleDelete(record.id)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h2>管理员管理</h2>
        <Button 
          type="primary" 
          icon={<PlusOutlined />}
          onClick={() => showModal()}
        >
          添加管理员
        </Button>
      </div>
      
      <Table 
        columns={columns} 
        dataSource={admins} 
        rowKey="id"
        pagination={{
          total: admins.length,
          showTotal: (total) => `共 ${total} 条记录`,
          showSizeChanger: true,
          showQuickJumper: true
        }}
      />

      <Modal
        title={editingAdmin ? '编辑管理员' : '添加管理员'}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        width={600}
      >
        <Form
          form={form}
          layout="vertical"
          initialValues={{
            role: '系统管理员',
            permissions: []
          }}
        >
          <Form.Item
            name="name"
            label="管理员名称"
            rules={[{ required: true, message: '请输入管理员名称' }]}
          >
            <Input placeholder="请输入管理员名称" />
          </Form.Item>
          
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' }
            ]}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>
          
          <Form.Item
            name="role"
            label="角色"
            rules={[{ required: true, message: '请选择角色' }]}
          >
            <Select placeholder="请选择角色">
              <Option value="超级管理员">超级管理员</Option>
              <Option value="系统管理员">系统管理员</Option>
              <Option value="运营管理员">运营管理员</Option>
            </Select>
          </Form.Item>
          
          <Form.Item
            name="permissions"
            label="权限"
            rules={[{ required: true, message: '请选择权限' }]}
          >
            <Select mode="multiple" placeholder="请选择权限">
              <Option value="用户管理">用户管理</Option>
              <Option value="角色管理">角色管理</Option>
              <Option value="日志管理">日志管理</Option>
              <Option value="系统设置">系统设置</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default AdminManagement;